<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>徐理念Blog - 文章编辑</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/script/jquery-3.6.0.min.js"></script>
    <style>
        .form-group {
            margin-bottom: 1rem;
        }
        .article-preview {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
            min-height: 200px;
            background-color: #f8f9fa;
        }
        .tag-input {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            margin: 0.25rem;
            background-color: #0d6efd;
            color: white;
            border-radius: 0.25rem;
        }
        .tag-input .remove-tag {
            margin-left: 0.5rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!-- 头部区域 -->
<header class="blog-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <!-- 左侧标题 -->
            <div class="blog-title">
                <h3 class="mb-0">徐理念Blog</h3>
            </div>

            <!-- 中间导航链接 -->
            <nav class="d-none d-md-block">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="/blogHome"><i class="bi bi-house-door"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleList"><i class="bi bi-card-text"></i> 全部动态</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/categories"><i class="bi bi-folder"></i> 分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/tagList"><i class="bi bi-tags"></i> 标签</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleManage"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </li>
                </ul>
            </nav>

            <!-- 右侧用户信息 -->
            <div class="user-info">
                <div class="dropdown">
                    <a class="d-flex align-items-center text-decoration-none dropdown-toggle"
                       href="#" role="button" data-bs-toggle="dropdown">
                        <div class="user-avatar" th:text="用户">U</div>
                        <span class="d-none d-md-inline" th:text="徐理念">用户名</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                        <li><a class="dropdown-item" href="/settings"><i class="bi bi-gear"></i> 设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="main-content">
    <div class="container">
        <!-- 移动端导航菜单 -->
        <div class="d-md-none mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="/" class="btn btn-outline-primary"><i class="bi bi-house-door"></i> 首页</a>
                        <a href="/articleList" class="btn btn-outline-primary"><i class="bi bi-card-text"></i> 全部动态</a>
                        <a href="/categories" class="btn btn-outline-primary"><i class="bi bi-folder"></i> 分类</a>
                        <a href="/tagList" class="btn btn-outline-primary"><i class="bi bi-tags"></i> 标签</a>
                        <a href="/articleManage" class="btn btn-outline-primary"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="mb-0" th:text="${article != null and article.id != null} ? '编辑文章' : '新建文章'">新建文章</h4>
                        <div>
                            <button class="btn btn-secondary" onclick="previewArticle()">
                                <i class="bi bi-eye"></i> 预览
                            </button>
                            <button class="btn btn-success" onclick="saveArticle('DRAFT')">
                                <i class="bi bi-save"></i> 保存草稿
                            </button>
                            <button class="btn btn-primary" onclick="saveArticle('PUBLISHED')">
                                <i class="bi bi-send"></i> 发布
                            </button>
                        </div>
                    </div>

                    <div class="card-body">
                        <form id="articleForm">
                            <input type="hidden" id="articleId" th:value="${article?.id ?: ''}">

                            <!-- 文章标题 -->
                            <div class="form-group">
                                <label for="title" class="form-label">文章标题 *</label>
                                <input type="text" class="form-control" id="title" th:value="${article?.title ?: ''}"
                                       placeholder="请输入文章标题" required>
                            </div>

                            <!-- 文章摘要 -->
                            <div class="form-group">
                                <label for="summary" class="form-label">文章摘要</label>
                                <textarea class="form-control" id="summary" rows="3"
                                          th:text="${article?.summary ?: ''}"
                                          placeholder="请输入文章摘要（可选）"></textarea>
                            </div>

                            <!-- 分类选择 -->
                            <div class="form-group">
                                <label for="categoryId" class="form-label">文章分类 *</label>
                                <div class="input-group">
                                    <select class="form-control" id="categoryId" required>
                                        <option value="">请选择分类</option>
                                        <!-- 分类选项将通过JavaScript动态加载 -->
                                    </select>
                                    <button class="btn btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
                                        <i class="bi bi-plus"></i> 新建分类
                                    </button>
                                </div>
                            </div>

                            <!-- 标签选择 -->
                            <div class="form-group">
                                <label for="tagSelect" class="form-label">标签选择</label>
                                <div class="input-group mb-2">
                                    <select class="form-control" id="tagSelect">
                                        <option value="">选择已有标签</option>
                                        <!-- 标签选项将通过JavaScript动态加载 -->
                                    </select>
                                    <button class="btn btn-outline-primary" type="button" onclick="addSelectedTag()">
                                        <i class="bi bi-plus"></i> 添加
                                    </button>
                                </div>
                                <div class="mb-2">
                                    <div id="selectedTagsContainer">
                                        <!-- 已选择的标签将在这里动态显示 -->
                                    </div>
                                </div>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="tagInput" placeholder="输入新标签，按回车添加">
                                    <button class="btn btn-outline-secondary" type="button" onclick="addNewTag()">添加新标签</button>
                                </div>
                                <small class="text-muted">可选择已有标签或创建新标签</small>
                            </div>

                            <!-- 封面图片 -->

<!--                            <div class="form-group">-->
<!--                                <label for="coverImage" class="form-label">封面图片</label>-->
<!--                                <input type="url" class="form-control" id="coverImage"-->
<!--                                       th:value="${article?.coverImage ?: ''}"-->
<!--                                       placeholder="请输入图片URL或上传图片">-->
<!--                                <div class="mt-2" id="coverPreview" th:if="${article?.coverImage != null and article?.coverImage != ''}">-->
<!--                                    <img th:src="${article?.coverImage}" alt="封面预览" class="img-fluid" style="max-height: 150px;">-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="form-group">
                                <label for="coverImage" class="form-label">封面图片</label>
                                <ul class="nav nav-tabs" id="coverImageTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="url-tab" data-bs-toggle="tab" data-bs-target="#url" type="button" role="tab">图片链接</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload" type="button" role="tab">本地上传</button>
                                    </li>
                                </ul>

                                <div class="tab-content" id="coverImageTabContent">
                                    <!-- URL输入方式 -->
                                    <div class="tab-pane fade show active" id="url" role="tabpanel">
                                        <input type="url" class="form-control mt-2" id="coverImage"
                                               th:value="${article?.coverImage ?: ''}"
                                               placeholder="请输入图片URL">
                                    </div>

                                    <!-- 文件上传方式 -->
                                    <div class="tab-pane fade" id="upload" role="tabpanel">
                                        <div class="mt-2">
                                            <input type="file" class="form-control" id="coverImageFile" accept="image/*">
                                            <button class="btn btn-outline-primary mt-2" type="button" onclick="uploadCoverImage()">
                                                <i class="bi bi-upload"></i> 上传图片
                                            </button>
                                            <div id="uploadStatus" class="mt-2"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-2" id="coverPreview">
                                    <img th:src="${article?.coverImage}" alt="封面预览" class="img-fluid" style="max-height: 150px;">
                                </div>
                            </div>

                            <!-- 文章内容 -->
                            <div class="form-group">
                                <label for="content" class="form-label">文章内容 *</label>
                                <textarea class="form-control" id="content" rows="15"
                                          th:text="${article?.content ?: ''}"
                                          placeholder="请输入文章内容..." required></textarea>
                            </div>

                            <!-- 高级设置 -->
                            <div class="card mt-4">
                                <div class="card-header">
                                    <h6 class="mb-0">高级设置</h6>
                                </div>
                                <div class="card-body">
                                    <!-- 文章状态 -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label">文章状态</label>
                                                <div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="status" id="draft" value="0"
                                                               th:checked="${article?.status == 0 or article == null}" checked>
                                                        <label class="form-check-label" for="draft">草稿</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="status" id="published" value="1"
                                                               th:checked="${article?.status == 1}">
                                                        <label class="form-check-label" for="published">已发布</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="status" id="underReview" value="2"
                                                               th:checked="${article?.status == 2}">
                                                        <label class="form-check-label" for="underReview">审核中</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="status" id="offline" value="3"
                                                               th:checked="${article?.status == 3}">
                                                        <label class="form-check-label" for="offline">已下线</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 文章标记 -->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="flag" class="form-label">文章标记</label>
                                                <select class="form-select" id="flag">
                                                    <option value="">无标记</option>
                                                    <option value="原创" th:selected="${article?.flag == '原创'}">原创</option>
                                                    <option value="转载" th:selected="${article?.flag == '转载'}">转载</option>
                                                    <option value="翻译" th:selected="${article?.flag == '翻译'}">翻译</option>
                                                    <option value="热门" th:selected="${article?.flag == '热门'}">热门</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 其他选项 -->
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="isTop"
                                                       th:checked="${article?.isTop == 1}">
                                                <label class="form-check-label" for="isTop">置顶文章</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="isRecommend"
                                                       th:checked="${article?.isRecommend == 1}">
                                                <label class="form-check-label" for="isRecommend">推荐文章</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="isComment"
                                                       th:checked="${article?.isComment == null or article?.isComment == 1}" checked>
                                                <label class="form-check-label" for="isComment">允许评论</label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- SEO设置 -->
                                    <div class="form-group mt-3">
                                        <label for="metaKeywords" class="form-label">SEO关键词</label>
                                        <input type="text" class="form-control" id="metaKeywords"
                                               th:value="${article?.metaKeywords ?: ''}"
                                               placeholder="请输入SEO关键词，用逗号分隔">
                                    </div>

                                    <div class="form-group">
                                        <label for="metaDescription" class="form-label">SEO描述</label>
                                        <textarea class="form-control" id="metaDescription" rows="2"
                                                  th:text="${article?.metaDescription ?: ''}"
                                                  placeholder="请输入SEO描述"></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 创建分类模态框 -->
<div class="modal fade" id="createCategoryModal" tabindex="-1" aria-labelledby="createCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createCategoryModalLabel">创建新分类</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="newCategoryName" class="form-label">分类名称</label>
                    <input type="text" class="form-control" id="newCategoryName" placeholder="请输入分类名称">
                </div>
                <div class="mb-3">
                    <label for="newCategoryDescription" class="form-label">分类描述</label>
                    <textarea class="form-control" id="newCategoryDescription" rows="3" placeholder="请输入分类描述（可选）"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="createNewCategory()">创建</button>
            </div>
        </div>
    </div>
</div>

<!-- 底部区域 -->
<footer class="blog-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>联系我</h5>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fab fa-qq me-2"></i>
                        <strong>QQ:</strong> <span>123456789</span>
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-envelope me-2"></i>
                        <strong>Email:</strong> <span>example@example.com</span>
                    </li>
                    <li>
                        <i class="bi bi-chat-dots me-2"></i>
                        <strong>微信:</strong> <span>xuln_blog</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>关于博客</h5>
                <p>这是一个个人技术博客，分享编程经验、技术心得和生活感悟。</p>
            </div>
            <div class="col-md-4">
                <h5>友情链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-decoration-none">GitHub</a></li>
                    <li><a href="#" class="text-decoration-none">SegmentFault</a></li>
                    <li><a href="#" class="text-decoration-none">掘金</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <p class="mb-0">&copy; 2022 徐理念Blog. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 初始化标签和分类
    let tags = [];
    let categories = [];
    let allTags = [];

    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化已有数据
        const articleTags = /*[[${article?.tags}]]*/ '';
        if (articleTags) {
            tags = articleTags.split(',').map(tag => tag.trim()).filter(tag => tag);
            renderTags();
        }

        // 获取分类和标签数据
        loadCategories();
        loadTags();

        // 如果是编辑文章，设置分类
        const articleCategoryId = /*[[${article?.categoryId}]]*/ '';
        if (articleCategoryId) {
            document.getElementById('categoryId').value = articleCategoryId;
        }

        // 监听标签输入框回车事件
        document.getElementById('tagInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addNewTag();
                e.preventDefault();
            }
        });

        // 监听标签选择框回车事件
        document.getElementById('tagSelect').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addSelectedTag();
                e.preventDefault();
            }
        });

        // 监听封面图片URL变化，显示预览
        document.getElementById('coverImage').addEventListener('input', function() {
            const url = this.value;
            const previewDiv = document.getElementById('coverPreview');
            if (url) {
                previewDiv.innerHTML = `<img src="${url}" alt="封面预览" class="img-fluid" style="max-height: 150px;">`;
            } else {
                previewDiv.innerHTML = '';
            }
        });
    });

    // 加载分类数据
    async function loadCategories() {
        // 这里应该通过AJAX从后端获取分类数据
        try {
            var response =await $.ajax({
                url: '/categoriesAjax',
                method: 'GET',
            });
            if (response.code === 200) {
                categories = response.data
                console.log("cate:", response.data);
            }

            // 示例数据，实际应从服务器获取
            // categories = [
            //     {id: 1, name: "技术"},
            //     {id: 2, name: "生活"},
            //     {id: 3, name: "随笔"}
            // ];
            console.log("cate:", categories);

            const categorySelect = document.getElementById('categoryId');
            categories.forEach(category => {
                const option = document.createElement('option');
                option.value = category.id;
                option.textContent = category.name;
                categorySelect.appendChild(option);
            });
        } catch (e) {
            console.error(e);
        }
    }

    // 加载标签数据
    async function loadTags() {
        // 示例数据，实际应从服务器获取
        // allTags = ["Java", "Spring", "MySQL", "Redis", "Vue", "React"];

        // 这里应该通过AJAX从后端获取标签数据
        try {
            var response = await $.ajax({
                url: '/tagsAjax',
                method: 'GET',
            });
            if (response.code === 200) {
                allTags = response.data;
                console.log("tag:", response.data);
            }

            const tagSelect = document.getElementById('tagSelect');
            allTags.forEach(tag => {
                const option = document.createElement('option');
                option.value = tag.id;
                option.textContent = tag.name;
                tagSelect.appendChild(option);
            });
        } catch (e) {
            console.error(e);
        }
    }

    // 添加选中的标签
    function addSelectedTag() {
        const tagSelect = document.getElementById('tagSelect');
        const selectedTag = tagSelect.value;

        if (selectedTag && !tags.includes(selectedTag)) {
            tags.push(selectedTag);
            renderTags();
            tagSelect.value = '';
        }
    }

    // 添加新标签
    function addNewTag() {
        const tagInput = document.getElementById('tagInput');
        const tagValue = tagInput.value.trim();

        if (tagValue && !tags.includes(tagValue)) {
            tags.push(tagValue);

            // 如果新标签不在标签列表中，添加到列表中
            if (!allTags.includes(tagValue)) {
                allTags.push(tagValue);
                const tagSelect = document.getElementById('tagSelect');
                const option = document.createElement('option');
                option.value = tagValue;
                option.textContent = tagValue;
                tagSelect.appendChild(option);
            }

            renderTags();
            tagInput.value = '';
        }
    }

    // 删除标签
    function removeTag(index) {
        tags.splice(index, 1);
        renderTags();
    }

    // 渲染标签
    function renderTags() {
        const tagContainer = document.getElementById('selectedTagsContainer');
        tagContainer.innerHTML = '';

        tags.forEach((tag, index) => {
            const tagElement = document.createElement('span');
            tagElement.className = 'tag-input';
            tagElement.innerHTML = `
                ${tag}
                <span class="remove-tag" onclick="removeTag(${index})">&times;</span>
            `;
            tagContainer.appendChild(tagElement);
        });
    }

    // 创建新分类
    function createNewCategory() {
        const categoryName = document.getElementById('newCategoryName').value.trim();
        if (!categoryName) {
            alert('请输入分类名称');
            return;
        }

        // 实际应通过AJAX发送请求创建分类
        // 示例代码
        const newCategory = {
            id: Date.now(), // 模拟ID
            name: categoryName
        };

        categories.push(newCategory);

        // 更新分类下拉框
        const categorySelect = document.getElementById('categoryId');
        const option = document.createElement('option');
        option.value = newCategory.id;
        option.textContent = newCategory.name;
        categorySelect.appendChild(option);

        // 关闭模态框并清空输入
        const modal = bootstrap.Modal.getInstance(document.getElementById('createCategoryModal'));
        modal.hide();
        document.getElementById('newCategoryName').value = '';
        document.getElementById('newCategoryDescription').value = '';

        alert('分类创建成功');
    }

    // 上传封面图片
    function uploadCoverImage() {
        const fileInput = document.getElementById('coverImageFile');
        const statusDiv = document.getElementById('uploadStatus');
        const coverImageInput = document.getElementById('coverImage');
        const previewDiv = document.getElementById('coverPreview');

        console.log("开始上传图片");
        console.log("previewDiv元素:", previewDiv);


        if (!fileInput.files || fileInput.files.length === 0) {
            statusDiv.innerHTML = '<div class="alert alert-warning">请选择要上传的图片文件</div>';
            return;
        }

        const file = fileInput.files[0];
        if (!file.type.startsWith('image/')) {
            statusDiv.innerHTML = '<div class="alert alert-danger">请选择图片文件</div>';
            return;
        }

        // 显示上传状态
        statusDiv.innerHTML = '<div class="alert alert-info">上传中...</div>';

        // 创建FormData对象
        const formData = new FormData();
        formData.append('file', file);

        // 发送上传请求
        $.ajax({
            url: '/upload/image',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log("进入success回调");
                console.log("response",response);

                if (response.code === 200) {

                    console.log("成功！response.data",response.data);
                    // 检查元素是否存在
                    if (!coverImageInput) {
                        console.log("coverImageInput元素未找到");
                        return;
                    }
                    if (!previewDiv) {
                        console.log("previewDiv元素未找到");
                        return;
                    }
                    console.log("元素检查通过");
                    // 设置图片URL到输入框
                    coverImageInput.value = response.data;

                    // 显示预览
                    try {
                        previewDiv.innerHTML = `<img src="${response.data}" alt="封面预览" class="img-fluid" style="max-height: 150px;">`;
                    } catch (e) {
                        console.error("设置预览内容时出错:", e);

                        // console.log("previewDiv111111111111111111");
                    }

                    statusDiv.innerHTML = '<div class="alert alert-success">上传成功！</div>';
                    console.log("上传完成");
                } else {
                    console.error("上传失败:", response.message);
                    statusDiv.innerHTML = '<div class="alert alert-danger">上传失败: ' + response.message + '</div>';
                }
            },
            error: function(xhr, status, error) {
                statusDiv.innerHTML = '<div class="alert alert-danger">上传失败: ' + error + '</div>';
            }
        });
    }


    // 预览文章
    function previewArticle() {
        alert('文章预览功能待实现');
        // 这里可以打开预览窗口或跳转到预览页面
    }

    // 保存文章
    function saveArticle(status) {
        const articleId = document.getElementById('articleId').value;
        const title = document.getElementById('title').value.trim();
        const content = document.getElementById('content').value.trim();
        let categoryId = document.getElementById('categoryId').value;

        // 验证必填字段
        if (!title) {
            alert('请输入文章标题');
            return;
        }

        if (!content) {
            alert('请输入文章内容');
            return;
        }

        if (!categoryId) {
            // alert('请选择文章分类');
            categoryId = 11;
        }

        // 构造文章数据
        const articleData = {
            title: title,
            content: content,
            summary: document.getElementById('summary').value,
            tags: tags.join(','),
            categoryId: categoryId,
            coverImage: document.getElementById('coverImage').value,
            status: status === 'PUBLISHED' ? 1 : 0, // 1-已发布, 0-草稿
            flag: document.getElementById('flag').value,
            isTop: document.getElementById('isTop').checked ? 1 : 0,
            isRecommend: document.getElementById('isRecommend').checked ? 1 : 0,
            isComment: document.getElementById('isComment').checked ? 1 : 0,
            metaKeywords: document.getElementById('metaKeywords').value,
            metaDescription: document.getElementById('metaDescription').value
        };

        // 如果是编辑文章，添加ID
        if (articleId) {
            articleData.id = articleId;
        }

        // 发送保存请求
        $.ajax({
            url: articleId ? '/articleUpdate' : '/articleCreate',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(articleData),
            success: function(data) {
                if (data.code === 200) {
                    alert(status === 'PUBLISHED' ? '文章发布成功！' : '文章保存成功！');
                    // 跳转到文章管理页面
                    window.location.href = '/articleManage';
                } else {
                    alert('保存失败：' + data.message);
                }
            },
            error: function(xhr, status, error) {
                alert('保存失败：' + error);
            }
        });
    }
</script>
</body>
</html>
